<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div>
          <span style="color: #666">商品名称:</span>
          <el-input
            v-model="input1"
            style="width: 240px; margin: 0 12px"
            placeholder="请输入商品名称"
          />
          <el-button type="primary" style="margin: 0 12px" @click="search"
            >搜索</el-button
          >
        </div>


      </el-header>
      <el-main class="main">
        <el-button v-if="admin!='管理员'" type="success" @click="editUser">添加商品</el-button>
        <el-divider />
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="title" label="商品标题" />
          <el-table-column prop="price" label="价格(分)">
            <template #default="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="number" label="总数量" />
          <el-table-column prop="sold" label="已售数量" />
          <el-table-column prop="condition" label="新旧程度" />
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              <el-button v-if="scope.row.status === '待审核'" type="primary" round>待审核</el-button>
              <el-button v-if="scope.row.status === '已通过'" type="success" round>已通过</el-button>
              <el-button v-if="scope.row.status === '已驳回'" type="info" round>已驳回</el-button>
              <el-button v-if="scope.row.status === '待发布'" type="warning" round>待发布</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="homeImage" label="首页图片">
            <template #default="scope">
              <img
                :src="scope.row.homeImage"
                alt="首页图片"
                style="width: 50px; height: 50px; object-fit: cover"
                @error="handleImageError"
              />
            </template>
          </el-table-column>
          <el-table-column prop="操作" label="操作">
            <template #default="scope">
              <div>
                <el-button v-if="admin!='管理员'" link type="primary" @click="editUser(scope.row)">编辑</el-button>
                <el-button v-else link type="warning" @click="processesProduct(scope.row)">商品审核</el-button>
                <el-button link type="danger" @click="deleteUser(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <ProductDialogView
          v-if="dialogVisible"
          v-model="dialogVisible"
          :new-form-data="currentRow"
          :operation-mode="operationMode"
          @update="updateBrand"
        />
      </el-main>
      <el-footer class="footer"
        ><div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :size="size"
            layout="total, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-footer>
    </el-container>
  </div>
</template>

<script lang="js" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import instance from "@/utils/request";
import { onMounted } from "vue";
import ProductDialogView from "@/components/product/ProductDialogView.vue";
const dialogVisible = ref(false)
const input1 = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const size = ref("large");
const total = ref(0);
const currentRow = ref([]); // 添加当前选中行变量
// 添加操作模式变量
const operationMode = ref("user"); // 默认为用户模式
const search = () => {
  ElMessage.success("搜索成功！");
};
const tableData = ref([]);
// 添加商品后的更新方法
const updateBrand = () => {
  getProductList() // 刷新商品列表
  dialogVisible.value = false // 关闭弹窗
}
const editUser = (row) => {
  console.log('row', row);
  // 设置当前选中行
 if (row.id === undefined) {
  dialogVisible.value = true;
  currentRow.value = null; // 重置表单数据

}else {
  currentRow.value = row;
  dialogVisible.value = true;
}
};
const processesProduct = (row) => {
  console.log('row', row);
  // 设置当前选中行
 if (row.id === undefined) {
  dialogVisible.value = true;
  currentRow.value = null; // 重置表单数据

}else {
  currentRow.value = row;
  operationMode.value = "review";
  dialogVisible.value = true;
}

};

const deleteUser = async(row) => {
  // 在这里添加删除用户的逻辑
  const response = await instance.delete(`/product/delete?id=${row.id}`);
  if (response.data.code === 200) {
    ElMessage.success("删除成功！");
    getProductList(); // 刷新商品列表
  } else {
    ElMessage.error("删除失败！");
  }
};
let admin;
onMounted(() => {
  getProductList();
  admin = sessionStorage.getItem("adminName");
  console.log('admin', admin);
  // 根据用户角色设置操作模式
  if (admin) {
    operationMode.value = "review"; // 管理员模式
  } else {
    operationMode.value = "user"; // 用户模式
  }
});
const getProductList = async () => {
  // 在这里添加获取商品列表的逻辑
  const res = await instance.get("/product/list", {
    params: {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
  });
  if (res.data.code === 200) {
    tableData.value = res.data.data.records;
    total.value = res.data.data.total;
  } else {
    ElMessage.error("获取用户列表失败");
  }
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  getProductList();
}
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getProductList();
}
</script>
<style scoped>
.header {
  background-color: rgb(255, 255, 255);
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.main {
  background-color: rgb(255, 255, 255);
  padding: 20px 20px;
  height: calc(84vh - 100px);
  margin-top: 10px;
}
.footer {
  background-color: rgb(255, 255, 255);
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  margin-top: 15px;
}
.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
}
</style>
